<template>
  <div class="square-list table-theme">
      <head-title title="运营--广场分类列表"></head-title>
      <el-card>
          <div class="top-menu">
              <div class="menu-left"></div>
              <div class="menu-right">
                    <refresh-button @refresh="refreshPage"></refresh-button> 
                    <div class="add">
                      <el-button type="primary" @click="onOpenDialog('add')">添加分类</el-button>
                  </div>
              </div>
          </div>
          <p class="data-number">总用户数：{{ total }}</p>
          <el-table :data="list">
				<el-table-column label="序号" align="center" prop="type_id"></el-table-column>
				<el-table-column label="名称" align="center" prop="type_name"></el-table-column>
				<el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="onOpenDialog('details',scope.row)">详情</el-button>
                        <el-button type="primary" size="mini" @click="onOpenDialog('edit',scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="onDel(scope.row.type_id)">删除</el-button>
                    </template>
                </el-table-column>
          </el-table>
      </el-card>
      <el-dialog title="用户信息详情" :close-on-click-modal="false" :visible.sync="dialog" width="500px" center
		 :modal-append-to-body="false" @close="onClose">
         <el-form :model="form" ref="form" :rules="formRules" label-width="120px">
             <el-form-item label="分类ID:" v-if="type == 'details'">
                <el-input v-model="form.type_id" disabled></el-input>
             </el-form-item>
             <el-form-item label="分类名称:" prop="type_name">
                 <el-input v-model="form.type_name" :disabled="is_disabled"></el-input>
             </el-form-item>
             <el-form-item label="添加时间:" v-if="type == 'details'">
                 <el-input v-model="form.add_time" disabled></el-input>
             </el-form-item>
         </el-form>
         <span slot="footer" class="dialog-footer">
            <el-button @click="onClose">取 消</el-button>
            <el-button type="primary" @click="onSubimt('form')">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
export default {
    data () {
        return {
            total:0,
            page:0,
            limit:10,
            list:[],
            dialog:false,
            title:"添加分类",
            form:{},
            formRules:{
                type_name:[{required:true,message:'请输入分类名称'}]
            },
            type:'add',
            is_disabled:false
        }
    },
    methods: {
        init(e){
            this.page = e
            let data ={
                page:e?e-1:0,
                limit:this.limit
            }
            this.$http(this.$ApiList.SquareTypeList,data).then(res=>{
                this.total = res.datas.count;
                this.list = res.datas.data;
            })
        },
        refreshPage(){

        },
        onOpenDialog(type,row){
            this.dialog = true;
            this.type = type;
            switch (type) {
                case 'add':
                    this.title = '添加分类';
                    this.$set(this.form,'type_name','');
                    break;
                case 'details':
                    this.title = '分类详情';
                    this.form = row
                    this.is_disabled = true;
                    break;
                case 'edit':
                    this.title = '编辑分类';
                    this.form = row
                    break;
                default:
                    break;
            }
        },
        onSubimt(formName){
            if(this.type === 'details'){
                this.is_disabled = false;
                this.dialog = false;
                return false;
            }
            this.$refs[formName].validate(valid=>{
                if(valid){
                    switch (this.type) {
                        case 'add':
                            this.$http(this.$ApiList.UpSquareType,{type_name:this.form.type_name}).then(res=>{
                                this.$message.success(res.datas);
                                this.is_disabled = false;
                                this.dialog = false;
                                this.init(this.page);
                            })
                            break;
                        case 'edit':
                            let data = JSON.parse(JSON.stringify(this.form));
                            delete data.add_time;
                            this.$http(this.$ApiList.UpdateSquareType,data).then(res=>{
                                this.$message.success(res.datas);
                                this.is_disabled = false;
                                this.dialog = false;
                                this.init(this.page);
                            })
                            break;
                        default:
                            break;
                    }
                }else{
                    this.$message.error('请填写完整信息后提交')
                }
            })
        },
        onClose(){
            this.is_disabled = false;
            this.dialog = false;
        },
        onDel(type_id){
            this.$confirm('此操作将永久删除该广场分类, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$http(this.$ApiList.DelSquareType, {type_id}).then(res => {
							this.$message.success(res.datas);
                            this.init(this.page);
						});
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
        }
    },
    created () {
        this.init();
    }
}
</script>

<style lang="scss" scoped>
.square-list{
    
}
</style>